<template>
  <view>
    <view v-for="(order, index) in orders" :key="index" class="order-item">
      <view>订单编号: {{ order.order_id }}</view>
      <view>预估重量: {{ order.estimated_weight }}</view>
      <view>回收品类: {{ order.recycling_category }}</view>
      <view>预估价格: ¥{{ order.estimated_price }}</view>
      <view>回收时间: {{ formatDate(order.collection_time) }}</view>
      <view>订单状态: {{ order.order_status }}</view>
    </view>
    <view v-if="loading">加载中...</view>
    <view v-if="noMoreData">没有更多数据了</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orders: [],
      page: 1,
      limit: 10,  // 每页的订单数量
      loading: false,
      noMoreData: false
    };
  },
  onLoad() {
    this.fetchOrders();
  },
  onReachBottom() {
    if (!this.noMoreData) {
      this.fetchOrders();
    }
  },
  methods: {
    async fetchOrders() {
      if (this.loading) return;
      
      this.loading = true;
      try {
        const res = await uni.request({
          url: 'http://localhost:8088/api/recyclable/order/list', // 替换为实际 API URL
          method: 'GET',
          data: {
            page: this.page,
            limit: this.limit
          }
        });
        
		console.log(res.data)
		
        const newOrders = res.data.data;
		
        if (newOrders.length < this.limit) {
          this.noMoreData = true;
        }

        this.orders = [...this.orders, ...newOrders];
        this.page += 1;
      } catch (e) {
        console.error(e);
      } finally {
        this.loading = false;
      }
    },
    formatDate(date) {
      const d = new Date(date);
      return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}`;
    }
  }
};
</script>

<style scoped>
.order-item {
  padding: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
}
</style>